import React, { useRef } from 'react'
import { reqClasses, reqDeleteClasses, reqUpdateClasses, reqAddClasses } from '../../api'
import { useDataSource, useModal } from '../Tag'
import { Card, Button, Table, Space,  Popconfirm, Modal, Form, Input, message } from "antd"

function useClasses() {
    const { dataSource, resetDatasource, total, pageChange } = useDataSource(reqClasses)
    return {
        dataSource,
        resetDatasource,
        total,
        pageChange
    }
}


function useColumns(editFun, resetDatasource) {
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
        },
        {
            title: '分类名',
            dataIndex: 'name',
        },
        {
            title: '操作',
            key: 'action',
            render: text => (
                <Space size="small">
                    <a onClick={() => {
                        editFun(text)
                    }}>编辑</a>
                    <Popconfirm
                        title="你确定要删除吗？"
                        onConfirm={() => confirm(text)}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a >删除</a>
                    </Popconfirm>
                </Space>
            )
        },
    ];

    async function toDeleteClasses(id) {
        const { success } = await reqDeleteClasses(id)
        if (success) {
            message.success('删除成功')
            resetDatasource()
        }
    }

    function confirm({ id }) {
        toDeleteClasses(id)
    }

    return {
        columns,
    }
}

function useClassesForm(classesForm, resetDatasource, hiddenModal) {

    function toUpdateClasses() {
        classesForm.current.validateFields().then(async value => {
            const { success } = await reqUpdateClasses(value)
            if (success) {
                message.success('更新成功')
                resetDatasource()
                hiddenModal()
            }
        })
    }

    function toAddClasses() {
        classesForm.current.validateFields().then(async value => {
            const { success } = await reqAddClasses({ name: value.name })
            if (success) {
                message.success('添加成功')
                resetDatasource()
                hiddenModal()
            }
        })
    }

    return {
        toUpdateClasses,
        toAddClasses
    }

}

const Classes = () => {

    const from = useRef()

    const { addFunction, isModalVisible, handleOk,
        handleCancel, isEdit, editFun,
        hiddenModal } = useModal(from)

    const { dataSource, resetDatasource, total, pageChange } = useClasses()

    const { columns } = useColumns(editFun, resetDatasource)

    const { toUpdateClasses, toAddClasses } = useClassesForm(from, resetDatasource, hiddenModal)

    return (
        <Card size="small"
            extra={<Button type="link" onClick={addFunction} >添加分类</Button>}
            style={{ width: '100%' }}>
            <Table dataSource={dataSource}
                columns={columns}
                pagination={{
                    defaultPageSize: 7, pageSize: 7,
                    showQuickJumper: true,
                    total: total, onChange: pageChange,
                    showTotal: (total) => `共 ${total} 条`
                }}
                size="small"
                rowKey="id" />
            <Modal title={isEdit ? '编辑分类' : '添加分类'}
                forceRender="true"
                destroyOnClose={true}
                visible={isModalVisible} onOk={() => {
                    handleOk(toUpdateClasses, toAddClasses)
                }} onCancel={handleCancel}>
                <Form
                    ref={from}
                    name="basic"
                    labelCol={{
                        span: 5,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    preserve={false}
                >
                    <Form.Item
                        name="id"
                        hidden={true}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="分类名"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请输入分类名',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </Card>
    )
}

export default Classes
